<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html lang="zh">
<head>
    <meta charset="utf-8">
    <base href="${pageContext.request.contextPath}/">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
    <title>首页 - 光年(Light Year Admin)后台管理系统模板</title>
</head>

<body data-logobg="color_8" data-headerbg="color_8" data-sidebarbg="color_8" data-theme="default" >
<div class="lyear-layout-web" style="background-image: url('${pageContext.request.contextPath}/images/background3.jpg'); background-size: cover; background-attachment: fixed;">
    <div class="lyear-layout-container">
        <jsp:include page="common.jsp"/>

        <!--页面主要内容-->
        <main class="lyear-layout-content">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-lg-12">
                        <div class="card" style="background-image: url('${pageContext.request.contextPath}/images/background3.jpg'); background-size: cover; background-attachment: fixed;">

                            <div class="card-toolbar clearfix">
                                <div class="toolbar-btn-action">
                                    <a class="btn btn-primary m-r-5"  data-toggle="modal" data-target="#add-class" ><i class="mdi mdi-plus" ></i> 新增</a>
                                </div>
                            </div>


                            <div class="card-body">
                                <!-- 表格 -->
                                <div id='admin_table'></div>
                                <!-- 表格结束 -->

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </main>
        <!--End 页面主要内容结束-->
    </div>
</div>


<!-- 添加管理员的弹出框 -->
<div class="modal fade" id="add-class" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close" onclick="clearForm()"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" >添加管理员</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" id="addAdminForm" action="lyear_forms_elements.html" method="post" onsubmit="return false;">
                    <div class="form-group">
                        <label class="col-md-3 control-label" for="addusername">账号：</label>
                        <div class="col-md-7">
                            <input class="form-control" type="text" id="addusername"  name="addusername" placeholder="请输入账号..">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-md-3 control-label" for="addpassword">密码：</label>
                        <div class="col-md-7">
                            <input class="form-control" type="password" id="addpassword"  name="addpassword" placeholder="请输入密码..">
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal" onclick="clearForm()">关闭</button>
                <button type="button" class="btn btn-primary"  id="addAdmin">添加</button>
            </div>
        </div>
    </div>
</div>
<!-- 添加班级的弹出框结束 -->


<!-- 修改管理员的弹出框 -->
<div class="modal fade" id="modify-class" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" onclick="clearForm()" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="exampleModalLabel">修改管理员</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" id="updateForm" action="lyear_forms_elements.html" method="post" onsubmit="return false;">
                    <div class="form-group">
                        <div class="col-md-7">
                            <input class="form-control" type="hidden" id="updateid">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-md-3 control-label" for="updateusername">账号：</label>
                        <div class="col-md-7">
                            <input class="form-control" type="text" id="updateusername"  name="updateusername" placeholder="请输入账号..">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-md-3 control-label" for="updatepassword">密码：</label>
                        <div class="col-md-7">
                            <input class="form-control" type="text" id="updatepassword" name="updatepassword" placeholder="请输入密码..">
                        </div>
                    </div>
                </form>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal" onclick="clearForm()" >关闭</button>
                <button type="button" class="btn btn-primary" onclick="updateAdmin()" >修改</button>
            </div>
        </div>
    </div>
</div>
<!-- 修改管理员的弹出框结束 -->

<script type="text/html" id="all_admin">

    <table class="table table-bordered table-hover ">
        <thead>
        <tr>
            <th>id</th><th>管理员名</th><th>密码</th><th>操作</th>
        </tr>
        </thead>
        <tbody>
        {{each data}}
        <tr>
            <td>{{$value.id}}</td>
            <td>{{$value.username}}</td>
            <td>{{$value.password}}</td>
            <td>
                <button class="btn btn-info btn-xs" type="button" onclick="findById('{{$value.id}}')" data-toggle="modal" data-target="#modify-class" >
                    <span class="mdi mdi-lead-pencil"></span>修改
                </button>
                <button class="btn btn-danger btn-xs" type="button" onclick="deleteAdmin('{{$value.id}}')" >
                    <span class="mdi mdi-close"></span>删除
                </button>
            </td>
        </tr>
        {{/each}}
        </tbody>
    </table>
</script>
<script type="text/javascript">
    function findAll(){
        $.ajax({
            url:"api/admin/page",
            type:"GET",
            dataType:"JSON",
            success:function (resp){
                if(resp.code===10000){
                    //resp.data是返回的数据，将服务器返回的数据在模板中渲染
                    let html = template('all_admin', {data:resp.data});
                    //将渲染完成的数据挂载在页面上
                    $('#admin_table').html(html);
                }else {
                    lightyear.notify(resp.msg, 'success', 1000, 'mdi mdi-emoticon-happy', 'top', 'center' );
                }
            }
        })
    }

    function clearForm(){
        $("#addAdminForm").data('bootstrapValidator').resetForm(true);
        $("#updateForm").data('bootstrapValidator').resetForm(true);
    }

    $(document).ready(function () {
        findAll();
    });

    function findById(id){
        $.ajax({
            url:"api/admin/"+id,
            type:"GET",
            dataType:"JSON",
            success:function (resp){
                if(resp.code===10000){
                    $("#updateid").val(resp.data.id);
                    $("#updateusername").val(resp.data.username);
                    $("#updatepassword").val(resp.data.password);
                }else {
                    lightyear.notify(resp.msg, 'success', 1000, 'mdi mdi-emoticon-happy', 'top', 'center' );
                }
                return resp.data;
            }
        })
    }


    $("#addAdmin").click(function (){
        $("#addAdminForm").data('bootstrapValidator').validate();//相当于触发一次所有的验证
        if($("#addAdminForm").data('bootstrapValidator').isValid()){//判断验证是否已经通过
            $.ajax({
                url:"api/admin/add",
                type:"POST",
                contentType: "application/json;charset=utf-8", // 设置Content-Type为application/json
                data:JSON.stringify({username:$("#addusername").val(),password:$("#addpassword").val()}),
                dataType:"JSON",
                success:function (resp){
                    $("#add-class").modal('hide');
                    $("#addAdminForm").data('bootstrapValidator').resetForm(true);
                    $("#addAdminForm")[0].reset();
                    if(resp.code===10000){
                        lightyear.notify(resp.msg, 'success', 1000, 'mdi mdi-emoticon-happy', 'top', 'center' );
                        findAll();
                    }else {
                        lightyear.notify(resp.msg, 'success', 1000, 'mdi mdi-emoticon-happy', 'top', 'center' );
                    }
                }
            })
        }
    })

    function updateAdmin(){
        $("#updateForm").data('bootstrapValidator').validate();
        $.ajax({
            url:"api/admin/update",
            type:"POST",
            contentType: "application/json;charset=utf-8", // 设置Content-Type为application/json
            data:JSON.stringify({id:$("#updateid").val(),username:$("#updateusername").val(), password:$("#updatepassword").val()}),
            dataType:"JSON",
            success:function (resp){
                if(resp.code===10000){
                    $("#modify-class").modal('hide');
                    $("#updateForm").data('bootstrapValidator').resetForm(true);
                    lightyear.notify(resp.msg, 'success', 1000, 'mdi mdi-emoticon-happy', 'top', 'center' );
                    findAll();
                }else {
                    lightyear.notify(resp.msg, 'success', 1000, 'mdi mdi-emoticon-happy', 'top', 'center' );
                }
            }
        })
    }


    function deleteAdmin(id){
        $.confirm({
            title: '删除管理员',
            content: '确定删除该管理员信息',
            buttons: {
                confirm: {
                    text: '确认',
                    action: function(){
                        $.ajax({
                            url:"api/admin/"+id,
                            type:"DELETE",
                            dataType:"JSON",
                            success:function (resp){
                                if(resp.code===10000){
                                    //$("#add-class").modal("hide");
                                    lightyear.notify(resp.msg, 'success', 1000, 'mdi mdi-emoticon-happy', 'top', 'center' );
                                    findAll();
                                }else {
                                    lightyear.notify(resp.msg, 'success', 1000, 'mdi mdi-emoticon-happy', 'top', 'center' );
                                }
                            }
                        })
                    }
                },
                cancel: {
                    text: '取消',
                },
            }
        });
    }

    /**
     *下面就是bootstrapValidator的初始化
     *定义你需要的哪些表单需要验证，验证什么内容
     **/
    $("#addAdminForm").bootstrapValidator({
        feedbackIcons: {//这里是用来对应三种不同状态时，在输入框后面添加的图标
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        fields:{//哪些字段需要验证，和html中的输入框，下拉框等等表单name属性所对应。
            addusername:{
                validators:{//从这里也可以容易的看出可以有多个验证信息
                    notEmpty:{//非空验证
                        message:"请输入用户名！！！" //提示信息，当你不写这里时它会自动的调用自带的提示信息，默认是英文，可导入language下的中文JS文件
                    },
                }
            },
            addpassword:{
                validators:{
                    notEmpty:{
                        message:"请输入密码！！！"
                    }
                }
            }
        }
    });

    $("#updateForm").bootstrapValidator({
        feedbackIcons: {//这里是用来对应三种不同状态时，在输入框后面添加的图标
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        fields:{//哪些字段需要验证，和html中的输入框，下拉框等等表单name属性所对应。
            updateusername:{
                validators:{//从这里也可以容易的看出可以有多个验证信息
                    notEmpty:{//非空验证
                        message:"请输入用户名！！！" //提示信息，当你不写这里时它会自动的调用自带的提示信息，默认是英文，可导入language下的中文JS文件
                    },
                }
            },
            updatepassword:{
                validators:{
                    notEmpty:{
                        message:"请输入密码！！！"
                    }
                }
            }
        }
    });

</script>
</body>
</html>